<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width:800px;">
        <el-form :inline="true" :model="addFaProjectForm" ref="addFaProjectRef" :rules="addFaProjectrules">
            <!-- <el-form-item label="单位名称" :label-width="formLabelWidth" prop="company">
                <el-input v-model="addFaProjectForm.company" autocomplete="off" ref="name" placeholder="请填写单位名称"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="合同号" :label-width="formLabelWidth" prop="agreementNum">
                <el-input v-model="addFaProjectForm.agreementNum" autocomplete="off" ref="name"
                placeholder="请填写合同号"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="验收单号" :label-width="formLabelWidth" prop="oddNumber">
                <el-input v-model="addFaProjectForm.oddNumber" autocomplete="off" ref="name"
                placeholder="请填写验收单号"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="数量" :label-width="formLabelWidth" prop="amount" v-if="addFaProjectForm.id">
                <el-input v-model="addFaProjectForm.amount" autocomplete="off" ref="name" placeholder="请填写数量"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="总价" :label-width="formLabelWidth" prop="money" v-if="addFaProjectForm.id">
                <el-input v-model="addFaProjectForm.money" autocomplete="off" ref="name" placeholder="请填写总价"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="采购组织形式" :label-width="formLabelWidth" prop="purchasesStyle">
                <el-input v-model="addFaProjectForm.purchasesStyle" autocomplete="off" ref="name"
                placeholder="请填写采购组织形式"></el-input>
            </el-form-item>
            <el-form-item label="记帐类型" :label-width="formLabelWidth" prop="accountingType">
                <el-input v-model="addFaProjectForm.accountingType" autocomplete="off" ref="name"
                placeholder="请填写记帐类型"></el-input>
            </el-form-item>
            <el-form-item label="学科" :label-width="formLabelWidth" prop="subject">
                <el-input v-model="addFaProjectForm.subject" autocomplete="off" ref="name" placeholder="请填写学科"></el-input>
            </el-form-item>
            <el-form-item label="学科类型" :label-width="formLabelWidth" prop="subjectType">
                <el-input v-model="addFaProjectForm.subjectType" autocomplete="off" ref="name"
                    placeholder="请填写学科类型"></el-input>
                </el-form-item> -->
            <!-- <el-form-item label="购置日期" :label-width="formLabelWidth" prop="purchaseDate" v-if="addFaProjectForm.id">
                <el-input v-model="addFaProjectForm.purchaseDate" autocomplete="off" ref="name"
                placeholder="请填写购置日期"></el-input>
            </el-form-item>
            <el-form-item label="入帐日期" :label-width="formLabelWidth" prop="storageDate" v-if="addFaProjectForm.id">
                <el-input v-model="addFaProjectForm.storageDate" autocomplete="off" ref="name"
                placeholder="请填写入帐日期"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="创建时间" :label-width="formLabelWidth" prop="createDate" v-if="addFaProjectForm.id">
                <el-input v-model="addFaProjectForm.createDate" autocomplete="off" ref="name"
                placeholder="请填写创建时间"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="创建人" :label-width="formLabelWidth" prop="createTeacherName">
                <el-input v-model="addFaProjectForm.createTeacherName" autocomplete="off" ref="name"
                    placeholder="请填写创建人"></el-input>
                </el-form-item>
                <el-form-item label="创建人工号" :label-width="formLabelWidth" prop="createTeacherNumber">
                    <el-input v-model="addFaProjectForm.createTeacherNumber" autocomplete="off" ref="name"
                    placeholder="请填写创建人工号"></el-input>
                </el-form-item>
            <el-form-item label="校区" :label-width="formLabelWidth" prop="campus" v-if="addFaProjectForm.id">
                <el-input v-model="addFaProjectForm.campus" autocomplete="off" ref="name" placeholder="请填写校区"></el-input>
            </el-form-item>
            <el-form-item label="审批状态" :label-width="formLabelWidth" prop="status" v-if="addFaProjectForm.id">
                <el-input v-model="addFaProjectForm.status" autocomplete="off" ref="name" placeholder="请填写审批状态"></el-input>
            </el-form-item>
            <el-form-item label="创建人部门" :label-width="formLabelWidth" prop="createDepartment">
                <el-input v-model="addFaProjectForm.createDepartment" autocomplete="off" ref="name"
                placeholder="请填写创建人部门"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="创建人部门id" :label-width="formLabelWidth" prop="createDepartmentId"
                v-if="addFaProjectForm.id">
                <el-input v-model="addFaProjectForm.createDepartmentId" autocomplete="off" ref="name"
                    placeholder="请填写创建人部门id"></el-input>
                </el-form-item> -->
            <!-- <el-form-item label="开票日期" :label-width="formLabelWidth" prop="purchaseDate">
                    <el-input v-model="addFaProjectForm.purchaseDate" autocomplete="off" ref="name"
                    placeholder="请填写开票日期"></el-input>
                </el-form-item> -->
            <!-- <el-form-item label="入帐日期" :label-width="formLabelWidth" prop="storageDate">
                    <el-input v-model="addFaProjectForm.storageDate" autocomplete="off" ref="name"
                    placeholder="请填写入帐日期"></el-input>
                </el-form-item> -->
            <!-- <el-form-item label="发票号" :label-width="formLabelWidth" prop="invoiceNumber">
                    <el-input v-model="addFaProjectForm.invoiceNumber" autocomplete="off" ref="name"
                    placeholder="请填写发票号"></el-input>
                </el-form-item>
                <el-form-item label="凭证号" :label-width="formLabelWidth" prop="voucherNo">
                    <el-input v-model="addFaProjectForm.voucherNo" autocomplete="off" ref="name"
                    placeholder="请填写凭证号"></el-input>
                </el-form-item> -->
            <el-form-item label="批次名称" :label-width="formLabelWidth" prop="agreementName">
                <el-input v-model="addFaProjectForm.agreementName" autocomplete="off" ref="name" placeholder="请填写批次名称"
                    style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="归口单位" :label-width="formLabelWidth" prop="company" v-if="!addFaProjectForm.id">
                <el-select v-model="addFaProjectForm.company" style="width: 200px;" class="m-2 selest_11"
                    placeholder="请选择归口单位">
                    <el-option v-for="(item, index) in schoolData" :key="index" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="经费来源" :label-width="formLabelWidth" prop="sourceOfFunds">
                <el-select v-model="addFaProjectForm.sourceOfFunds" style="width: 200px;" class="m-2 selest_11"
                    placeholder="请选择经费来源">
                    <el-option v-for="item in sourceOfFundData" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="资产来源" :label-width="formLabelWidth" prop="sourceOfAssets">
                <el-select v-model="addFaProjectForm.sourceOfAssets" style="width: 200px;" class="m-2 selest_11"
                    placeholder="请选择资产来源">
                    <el-option v-for="item in sourceOfAssetData" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="管理部门" :label-width="formLabelWidth" prop="createDepartmentId">
                <el-select v-model="addFaProjectForm.createDepartmentId" style="width: 200px;" class="m-2 selest_11"
                    placeholder="请选择管理部门" @change="changeDepartment">
                    <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="入账日期" :label-width="formLabelWidth" prop="storageDateStr">
                <el-config-provider :locale="locale">
                    <el-date-picker v-model="addFaProjectForm.storageDateStr" type="date" placeholder="请选择入账日期"
                        style="width: 200px;" @change="changeTime" />
                </el-config-provider>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
                <el-config-provider :locale="locale">
                    <el-input v-model="addFaProjectForm.remark" autocomplete="off" ref="name" style="width: 200px;"
                        placeholder="请填写备注"></el-input>
                </el-config-provider>
            </el-form-item>
            <el-form-item label="发票附件" :label-width="formLabelWidth" prop="invoiceEnlosure">
                <el-upload class="upload-demo" :auto-upload="false" :on-change="handleChange1" ref="upload"
                    accept=".xls,.xlsx,.doc,.docx,.pdf,image/*">
                    <template #trigger>
                        <el-button type="primary" style="width: 200px;">上传发票附件</el-button>
                    </template>
                    <template #tip>
                        <div class="el-upload__tip"></div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="其他附件" :label-width="formLabelWidth" prop="enclosure">
                <el-upload class="upload-demo" :auto-upload="false" :on-change="handleChange2" ref="upload1"
                    accept=".xls,.xlsx,.doc,.docx,.pdf,image/*">
                    <el-button type="primary" style="width: 200px;">上传其他附件</el-button>
                    <template #tip>
                        <div class="el-upload__tip"></div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="合同附件" :label-width="formLabelWidth" prop="agreementEnclosure">
                <el-upload class="upload-demo" :auto-upload="false" :on-change="handleChange3" ref="upload2"
                    accept=".xls,.xlsx,.doc,.docx,.pdf,image/*">
                    <el-button type="primary" style="width: 200px;">上传合同附件</el-button>
                    <template #tip>
                        <div class="el-upload__tip"></div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElConfigProvider } from "element-plus";
import { vxRule } from "@/utils/validator";
import { API_BASE_NAME, API_BASE_NAME1, } from '../../constants';
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { formatTime } from "@/utils/dateFormat";

export default {
    name: "AddFaProject",
    components: { ElForm, ElMessage, ElConfigProvider },
    setup() {
        return {
            locale: zhCn,
        }
    },
    data() {
        return {
            schoolName1: API_BASE_NAME,
            schoolName2: API_BASE_NAME1,
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            form: {

            },
            sourceOfFundData: [
                {
                    value: '财政拨款',
                    label: '财政拨款',
                },
                {
                    value: '教育事业费',
                    label: '教育事业费',
                },
                {
                    value: '其他',
                    label: '其他',
                },
            ],
            sourceOfAssetData: [
                {
                    value: '采购',
                    label: '采购',
                },
                {
                    value: '捐赠',
                    label: '捐赠',
                },
            ],
            schoolData: [
                {
                    value: API_BASE_NAME,
                    label: API_BASE_NAME,
                },
                {
                    value: API_BASE_NAME1,
                    label: API_BASE_NAME1,
                },
            ],
            user: {},
            attachment: [],
            attachment1: [],
            attachment2: [],
            departmentList: [],
            addFaProjectForm: {
                company: "",
                agreementName: "",
                agreementNum: "",
                invoiceNumber: "",
                voucherNo: "",
                oddNumber: "",
                amount: "",
                money: "",
                sourceOfFunds: "财政拨款",
                sourceOfAssets: "采购",
                purchasesStyle: "",
                accountingType: "",
                subject: "",
                subjectType: "",
                purchaseDate: "",
                storageDate: "",
                remark: "",
                invoiceEnlosure: "",
                enclosure: "",
                agreementEnclosure: "",
                createDate: "",
                createTeacherName: "",
                createTeacherNumber: "",
                campus: "",
                status: "",
                createDepartment: "",
                createDepartmentId: "",
                storageDateStr: "",

                // createDepartment: '',
                // createDepartmentId: '',
            },
            // 校验规则
            addFaProjectrules: {
                // company: vxRule(true, null, "blur"),
                agreementName: vxRule(true, null, "blur"),
                sourceOfFunds: vxRule(true, null, "blur"),
                sourceOfAssets: vxRule(true, null, "blur"),
            },
        };
    },
    mounted() {
        this.user = JSON.parse(sessionStorage.getItem('user'))
        if (this.user) {
            if (this.user.campus == 1) {
                this.addFaProjectForm.company = API_BASE_NAME
            } else {
                this.addFaProjectForm.company = API_BASE_NAME1
            }
        }
    },
    methods: {
        changeDepartment(value) {
            if (this.departmentList) {
                this.addFaProjectForm.createDepartment = this.departmentList.filter(item => item.id == value)[0].name
            }
            // console.log(this.addFaProjectForm.createDepartmentId, this.addFaProjectForm.createDepartment);
            // this.addFaProjectForm.createDepartmentId
        },
        changeTime(value) {
            // console.log(formatTime(value));
            this.addFaProjectForm.storageDateStr = formatTime(value)
        },
        handleChange1(uploadFile, uploadFiles) {
            let params = new FormData()
            params.append('file', uploadFile.raw)
            httpService("/javaApi/upload/uploadFile", params, "post").then(
                (data) => {
                    this.attachment.push(data.url)
                    // console.log(data);
                    // this.addFaProjectForm.invoiceEnlosure = data
                    // window.open("http://192.168.9.20:8088/javaApi" + data.url, "_blank")
                    // this.addFaProjectForm.invoiceEnlosure = data.url
                    // this.addFaProjectForm.invoiceEnlosure = 'http://192.168.9.22:8088/javaApi' + data.url
                    // this.addFaProjectForm.invoiceEnlosure = 'https://wx.zhengzhong.cn' + data.url
                }
            );
        },
        handleChange2(uploadFile, uploadFiles) {
            let params = new FormData()
            params.append('file', uploadFile.raw)
            httpService("/javaApi/upload/uploadFile", params, "post").then(
                (data) => {
                    this.attachment1.push(data.url)
                    // console.log(data);
                    // this.addFaProjectForm.enclosure = 'http://192.168.9.22:8088/javaApi' + data.url
                    // this.addFaProjectForm.enclosure = data.url
                    // this.addFaProjectForm.enclosure = 'https://wx.zhengzhong.cn' + data.url
                }
            );
        },
        handleChange3(uploadFile, uploadFiles) {
            let params = new FormData()
            params.append('file', uploadFile.raw)
            httpService("/javaApi/upload/uploadFile", params, "post").then(
                (data) => {
                    this.attachment2.push(data.url)
                    // this.addFaProjectForm.agreementEnclosure = data.url
                    // this.addFaProjectForm.agreementEnclosure = 'http://192.168.9.22:8088/javaApi' + data.url
                    // this.addFaProjectForm.agreementEnclosure = 'https://wx.zhengzhong.cn' + data.url
                }
            );
        },
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getFaProjectById(id) {
            httpService("/javaApi/faProject/queryById", { id: id }, "get").then(
                (data) => {
                    this.addFaProjectForm = data;
                }
            );
        },
        getDepartmentList() {
            httpService("/javaApi/faDepartment/list/1/100", { campus: this.user.campus }, "get").then(
                (data) => {
                    console.log(data);
                    this.departmentList = data.list
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addFaProjectForm.id = "";
            this.addFaProjectForm.company = "";
            this.addFaProjectForm.agreementName = "";
            this.addFaProjectForm.agreementNum = "";
            this.addFaProjectForm.invoiceNumber = "";
            this.addFaProjectForm.voucherNo = "";
            this.addFaProjectForm.oddNumber = "";
            this.addFaProjectForm.amount = "";
            this.addFaProjectForm.money = "";
            this.addFaProjectForm.sourceOfFunds = "";
            this.addFaProjectForm.sourceOfAssets = "";
            this.addFaProjectForm.purchasesStyle = "";
            this.addFaProjectForm.accountingType = "";
            this.addFaProjectForm.subject = "";
            this.addFaProjectForm.subjectType = "";
            this.addFaProjectForm.purchaseDate = "";
            this.addFaProjectForm.storageDate = "";
            this.addFaProjectForm.remark = "";
            this.addFaProjectForm.invoiceEnlosure = "";
            this.addFaProjectForm.enclosure = "";
            this.addFaProjectForm.agreementEnclosure = "";
            this.addFaProjectForm.createDate = "";
            this.addFaProjectForm.createTeacherName = "";
            this.addFaProjectForm.createTeacherNumber = "";
            this.addFaProjectForm.campus = "";
            this.addFaProjectForm.status = "";
            this.addFaProjectForm.createDepartment = "";
            this.addFaProjectForm.createDepartmentId = "";
            this.addFaProjectForm.storageDateStr = ""
            this.attachment = []
            this.attachment1 = []
            this.attachment2 = []
            this.$refs.upload.clearFiles();
            this.$refs.upload1.clearFiles();
            this.$refs.upload2.clearFiles();
        },
        save() {
            this.addFaProjectForm.invoiceEnlosure = this.attachment.join(',')
            this.addFaProjectForm.enclosure = this.attachment1.join(',')
            this.addFaProjectForm.agreementEnclosure = this.attachment2.join(',')
            // console.log(this.addFaProjectForm.company);

            this.$refs.addFaProjectRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("agreementName", this.addFaProjectForm.agreementName);
                    // params.append("agreementNum", this.addFaProjectForm.agreementNum);
                    // params.append("invoiceNumber", this.addFaProjectForm.invoiceNumber);
                    // params.append("voucherNo", this.addFaProjectForm.voucherNo);
                    // params.append("oddNumber", this.addFaProjectForm.oddNumber);
                    // params.append("amount", this.addFaProjectForm.amount);
                    // params.append("money", this.addFaProjectForm.money);
                    params.append("sourceOfFunds", this.addFaProjectForm.sourceOfFunds);
                    params.append("sourceOfAssets", this.addFaProjectForm.sourceOfAssets);
                    // params.append("purchasesStyle", this.addFaProjectForm.purchasesStyle);
                    // params.append("accountingType", this.addFaProjectForm.accountingType);
                    // params.append("subject", this.addFaProjectForm.subject);
                    // params.append("subjectType", this.addFaProjectForm.subjectType);
                    // params.append("purchaseDate", this.addFaProjectForm.purchaseDate);
                    // params.append("storageDate", this.addFaProjectForm.storageDate);
                    params.append("remark", this.addFaProjectForm.remark);
                    params.append("invoiceEnlosure", this.addFaProjectForm.invoiceEnlosure);
                    params.append("enclosure", this.addFaProjectForm.enclosure);
                    params.append("agreementEnclosure", this.addFaProjectForm.agreementEnclosure);
                    // params.append("createDate", this.addFaProjectForm.createDate);
                    // params.append("createTeacherName", this.addFaProjectForm.createTeacherName);
                    // params.append("createTeacherNumber", this.addFaProjectForm.createTeacherNumber);
                    // params.append("campus", this.addFaProjectForm.campus);
                    // params.append("status", this.addFaProjectForm.status);
                    params.append("createDepartment", this.addFaProjectForm.createDepartment);
                    params.append("createDepartmentId", this.addFaProjectForm.createDepartmentId);
                    params.append("storageDateStr", this.addFaProjectForm.storageDateStr);
                    if (this.addFaProjectForm.id) {
                        params.append("id", this.addFaProjectForm.id);
                        httpService("/javaApi/faProject/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getFaProjectList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    } else {
                        params.append("company", this.addFaProjectForm.company);
                        if (this.addFaProjectForm.company == this.schoolName1) {
                            params.append("campus", 1);
                        } else if (this.addFaProjectForm.company == this.schoolName2) {
                            params.append("campus", 2);
                        }
                        httpService("/javaApi/faProject/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getFaProjectList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style>
.el-dialog {
    width: 80%;
}

.selest_11 {
    width: 190px;
}

.el-upload button {
    width: 190px;
}

.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 15px;
}
</style>